<template>
   <div class="singerBox-out">
     <shortcuts></shortcuts>
     <div class="Mv-table">
       <dl>
         <td>语种:</td>
   <dd v-for="(item,i) in languageSort" :key="i"  @click="singerdata(item.area,i,1)" :class="{active:singerIndex==i}">{{item.name}}</dd>
   </dl>
    <dl>
   <td >类型:</td>
   <dd v-for="(item,i) in typeSort" :key="i"  @click="singerdata(item.type,i,2)" :class="{active:singerIndex1==i}">{{item.name}}</dd>
   </dl>
    <dl style="display:flex">
    <div style="width:7%;"><td >筛选:</td></div>
    <div class="dl-right"> <dd v-for="(item,i) in initialSort" :key="i" @click="singerdata(item.initial,i,3)" :class="{active:singerIndex2==i}">{{item.name}}</dd></div>
    </dl>
      </div>
       <div style="display:flex;flex-wrap:wrap;margin-top:80px;width:100%;" > 
       <div class="related" v-for="(item,i) in singerList" :key="i" @click="TosingerDetail(item)">
             <img :src="item.img1v1Url" alt="">
             <div>{{item.name}}</div>
         </div>
    </div> 
      </div>
</template>
<script>
 export default{
    data(){
      return{
        singerIndex:0,
         singerIndex1:0,
          singerIndex2:0,
          languageSort: [
        { area: -1, name: "全部" },
        { area: 7, name: "华语" },
        { area: 96, name: "欧美" },
        { area: 8, name: "日本" },
        { area: 16, name: "韩国" },
        { area: 0, name: "其它" },
      ],
      typeSort: [
        { type: -1, name: "全部" },
        { type: 1, name: "男歌手" },
        { type: 2, name: "女歌手" },
        { type: 3, name: "乐队" },
      ],
      initialSort: [
        { initial: -1, name: "热门" },
        { initial: "a", name: "A" },
        { initial: "b", name: "B" },
        { initial: "c", name: "C" },
        { initial: "d", name: "D" },
        { initial: "e", name: "E" },
        { initial: "f", name: "F" },
        { initial: "g", name: "G" },
        { initial: "h", name: "H" },
        { initial: "i", name: "I" },
        { initial: "j", name: "J" },
        { initial: "k", name: "K" },
        { initial: "l", name: "L" },
        { initial: "m", name: "M" },
        { initial: "n", name: "N" },
        { initial: "o", name: "O" },
        { initial: "p", name: "P" },
        { initial: "q", name: "Q" },
        { initial: "r", name: "R" },
        { initial: "s", name: "S" },
        { initial: "t", name: "T" },
        { initial: "u", name: "U" },
        { initial: "v", name: "V" },
        { initial: "w", name: "W" },
        { initial: "x", name: "X" },
        { initial: "y", name: "Y" },
        { initial: "z", name: "Z" },
        { initial: 0, name: "#" },
      ],
       SingerInfo:{
           area:-1,
           type:-1,
           initial:-1,
           offset:0,
           limit:32
        },
        num:0,
        singerList:[]
        
      }
    },
    methods:{
     async getSinger(){
        const {data:res} =await this.$request("/artist/list",{
           area:this.SingerInfo.area,
           type:this.SingerInfo.type,
           initial:this.SingerInfo.initial,
           offset:this.num*30,
           limit:30
        })
        console.log(res)
         this.num++
        this.singerList=[...this.singerList,...res.artists]
      },
      async singerdata(type,i,num){
        console.log(type,i)
        this.singerList=[]
        this.num=0
           if(num==1){
             this.singerIndex=i
             this.SingerInfo.area=type
           }
           else if(num==2){
              this.singerIndex1=i
             this.SingerInfo.type=type
           }else{
              this.singerIndex2=i
             this.SingerInfo.initial=type
           }
           this.getSinger()
      },
      scrollDs(fn,delay){
          let last=0;
          return function(){
            let noew=+new Date()
              if((noew-last)>delay){
                last=noew
                 fn()
            }
          }
      },
      TosingerDetail(item){
        console.log(item)
       this.$router.push(`/singerDetail?id=${item.id}`)
      }
    },
    mounted(){
      window.addEventListener('scroll',this.scrollDs(this.getSinger,3000))
       this.getSinger()
    }
 }
</script>
<style lang="less" scoped>
 .singerBox-out{
  width: 1300px;
  display: flex;
  padding:40px 0 80px 140px;
  flex-direction:column;
  .Mv-table{
    width:100%;
    padding-left:40px;
    dl{
      width:100%;
      height:40px;
       display:flex;
       flex-wrap:wrap;
      td{
          width:80px;
         height:25px;
         line-height:25px;
         text-align:center;
         color:black;
      }
      .dl-right{
        display:flex;
        width:89%;
        flex-wrap:wrap;
        dd{
          margin:5px 0;
        }
      }
      dd{
         width:80px;
         height:25px;
         font-size:14px;
         color:#aaa;
         line-height:25px;
         text-align:center;
      }
      .active{
        border:1px solid #ccc;
        border-radius:10px;
        background-color:#FDF5F5;
        color:#EC4747;
      }
    
  }
  }
  .related{
    width:20%;
    height:220px;
    color:black;
    font-size:13px;
    img{
      width:90%;
      height:180px;
      border-radius:10px;
    }
    div{
      width:90%;
      height:40px;
      line-height:40px;
    }
  }
 }
 
</style>